<template>
  <div>
    <a target="_blank" href="https://element-plus.org/zh-CN/component/steps.html"
      >https://element-plus.org/zh-CN/component/steps.html
    </a>
  </div>
  <div class="hr das"></div>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="Step 1" />
      <el-step title="Step 2" />
      <el-step title="Step 3" />
    </el-steps>

    <el-button style="margin-top: 12px" @click="next">Next step</el-button>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ tabsthtm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->

  <div class="hr das"></div>
  <div style="height: 300px">
    <el-steps direction="vertical" :active="active">
      <el-step title="Step 1" />
      <el-step title="Step 2" />
      <el-step title="Step 3" />
    </el-steps>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ stephtm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
</template>
      <script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import { demoProps } from "@/stores/modules/merakDemo";
import dropWrap from "../dropWrap.vue";
import Prism from "prismjs";
import "../prism.css";

const active = ref(0);

const next = () => {
  if (active.value++ > 2) active.value = 0;
};
let tabsthtm = ref<string>(`
    <el-steps :active="active" finish-status="success">
      <el-step title="Step 1" />
      <el-step title="Step 2" />
      <el-step title="Step 3" />
    </el-steps>

    const active = ref(0)

    const next = () => {
     if (active.value++ > 2) active.value = 0
    }
    `);
let stephtm = ref<string>(`
    <el-steps direction="vertical" :active="1">
      <el-step title="Step 1" />
      <el-step title="Step 2" />
      <el-step title="Step 3" />
    </el-steps>

    const active = ref(0)

    const next = () => {
     if (active.value++ > 2) active.value = 0
    }
    `);

/* 生命周期 */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
      <style lang="scss" scoped>
</style>